<template>
  <el-button type="primary" round size="large" class="buttonAdd" @click="addData">新增</el-button>
  <el-table :data="tableData" style="width: 100%" border height="calc(100vh - 106px)" fit="true">
    <el-table-column label="索引" type="index"/>
    <el-table-column prop="pr_code" label="工序编号"/>
    <el-table-column prop="pr_name" label="工序名称"/>
    <el-table-column prop="pr_type_txt" label="工序类型"/>
    <el-table-column prop="pr_mark" label="工序描述"/>
    <el-table-column prop="create_userid" label="创建人"/>
    <el-table-column prop="create_date" label="创建时间"/>
    <el-table-column prop="update_userid" label="修改人"/>
    <el-table-column prop="modify_date" label="修改时间"/>
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small"
                   @click="editHandleClick(scope.$index, scope.row)">编辑
        </el-button>
        <el-button link type="primary" size="small"
                   @click="deleteHandleClick(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500" @close="closeDialog" center="true">
    <el-form :model="form">
      <el-form-item label="工序编号" :label-width="formLabelWidth">
        <el-input v-model="form.processNumber" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="工序名称" :label-width="formLabelWidth">
        <el-input v-model="form.processName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="工序类型" :label-width="formLabelWidth">
        <el-select v-model="form.processType" placeholder="">
          <el-option label="前序工序" value="qianxugx"/>
          <el-option label="后序工序" value="houxugx"/>
        </el-select>
      </el-form-item>
      <el-form-item label="工序描述" :label-width="formLabelWidth">
        <el-input v-model="form.processDescription" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted} from "vue"
import {GetAllProcess, SaveProcessMessage} from "@/request/api";
import {ElMessage} from 'element-plus'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let tableData = reactive<any>([])
let isEdit = ref(false)
let dialogTitle = ref("");
const formLabelWidth = '140px'
const dialogFormVisible = ref()
let form = reactive({
  processNumber: '',
  processName: '',
  processType: '',
  processDescription: '',
  primaryKey: ""
})
onMounted(() => {
  getAllProcess()
})

function addData() {
  dialogTitle.value = "新增"
  dialogFormVisible.value = true
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const editHandleClick = (index: any, rowData: any) => {
  dialogTitle.value = "编辑"
  dialogFormVisible.value = true
  isEdit.value = true
  Object.assign(form, {
    processNumber: rowData.pr_code,
    processName: rowData.pr_name,
    processType: rowData.pr_type,
    processDescription: rowData.pr_mark,
    primaryKey: rowData.pr_id
  })
}

function closeDialog() {
  Object.assign(form, {
    processNumber: '',
    processName: '',
    processType: '',
    processDescription: '',
    primaryKey: ""
  })
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
async function deleteHandleClick(index: any, rowData: any) {
  try {
    const result = await SaveProcessMessage({
      data: JSON.stringify([{
        pr_id: rowData.pr_id,
        _state: "removed"
      }])
    })
    if (result.data.ret == "0") {
      getAllProcess()
      ElMessage({
        message: result.data.data,
        type: 'success',
      })
    } else {
      ElMessage({
        message: result.data.data,
        type: 'warning',
      })
    }
  } catch (error) {
    console.log(error)
  }
}

async function saveData() {
  debugger
  console.log(form)
  try {
    const result = await SaveProcessMessage({
      data: JSON.stringify([{
        "pr_code": form.processNumber,
        "pr_name": form.processName,
        "pr_mark": form.processDescription,
        "pr_type": form.processType,
        "pr_id": isEdit.value ? form.primaryKey : "",
        "_state": isEdit.value ? "modified" : "added"
      }])
    });
    if (result.data.ret == "0") {
      dialogFormVisible.value = false
      isEdit.value = false
      getAllProcess()
      ElMessage({
        message: result.data.data,
        type: 'success',
      })
    } else {
      ElMessage({
        message: result.data.data,
        type: 'warning',
      })
    }
  } catch (error) {
    console.log(error)
  }
}

async function getAllProcess() {
  try {
    const result = await GetAllProcess({command: JSON.stringify({"start": 0, "size": 50, "dataSourceType": "remote"})});
    Object.assign(tableData, result.data.data.DATA)
  } catch (error) {
    // 测试webstrom提交代码
    console.log(error)
  }
}
</script>

<style scoped>
.buttonAdd {
  float: left;
  margin: 3px;
}
</style>